﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Core.Master" AutoEventWireup="true"
    CodeBehind="ImagesSearch.aspx.cs" Inherits="Pap.Web.Modules.Administration.Views.ImagesSearch" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">

    function ShowPreview() {
        
        var ImageId = GetSelectedImageId();
        var image = Ext.ComponentMgr.get("<%= Image1.ClientID %>");
        image.setImageUrl("/image.route?Width=200&hight=150&ImageID=" + ImageId);
        
        
    }

    function GetSelectedImageId() {
        var selNodes = this.<%=ImageView.ClientID%>.getSelectedNodes();
        if (selNodes && selNodes.length > 0) {
            var selNode = selNodes[0];
            return selNode.id;
        }
        return 0;
    }
    </script> 
    <style type="text/css">
    .images-view .x-panel-body
    {
        background: white;
        font: 11px Arial, Helvetica, sans-serif;
    }
    .images-view .thumb
    {
        background: #dddddd;
        padding: 3px;
    }
    .images-view .thumb img
    {
        height: 60px;
        width: 80px;
    }
    .images-view .thumb-wrap
    {
        float: left;
        margin: 4px;
        margin-right: 0;
        padding: 5px;
        text-align: center;
    }
    .images-view .thumb-wrap span
    {
        display: block;
        overflow: hidden;
        text-align: center;
    }
    .images-view .x-view-over
    {
        border: 1px solid #dddddd;
        padding: 4px;
    }
    .images-view .x-view-selected
    {
        border: 1px solid #99bbe8;
        padding: 4px;
    }
    .images-view .x-view-selected .thumb
    {
        background: transparent;
    }
    .images-view .loading-indicator
    {
        font-size: 11px;
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 20px;
        margin: 10px;
    }
</style>
      <ext:Store runat="server" ID="sImageTypes" AutoLoad="True" IDMode="Legacy">
    <Reader>
        <ext:JsonReader ReaderID="ID">
            <Fields>
                <ext:RecordField Name="ID" />
                <ext:RecordField Name="Name" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>    
    <ext:Store runat="server" ID="sImages" AutoLoad="True" IDMode="Legacy">
    <Reader>
        <ext:JsonReader ReaderID="ImageID">
            <Fields>
                <ext:RecordField Name="ImageID" />
                <ext:RecordField Name="Label" />
                <ext:RecordField Name="ImageTypeID" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>
    <ext:FormPanel ID="pnlImages" runat="server" BodyStyle="padding:5px;"
            Title="Images" Border="true" Frame="true" IDMode="Legacy" meta:resourcekey="pnlImagesResource1" AutoScroll="true">
            <Body>

            <ext:FormPanel ID="BasicForm" runat="server" ButtonAlign="Right" Frame="True">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <ext:Anchor>
                        <ext:TextField AllowBlank="true" ID="txtPhotoLabels" runat="server" FieldLabel="Labels" meta:resourcekey="lblPhotoLabelsResource1">
                        </ext:TextField>
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:ComboBox runat="server" ID="cmbType" StoreID="sImageTypes" DisplayField="Name" AllowBlank="true" IDMode="Legacy"
                            Editable="false" FieldLabel="Type" ValueField="ID" TriggerAction="All" meta:resourcekey="cmbTypeResource1">
                        </ext:ComboBox>
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>
            <Buttons>
                <ext:Button ID="btnSearch" runat="server" Text="Search" meta:resourcekey="btnSearchResource1">
                    <AjaxEvents>
                        <Click OnEvent="BtnSearchClick" ViewStateMode="Include">
                            <EventMask ShowMask="true" Msg="Searching..." MinDelay="500" />
                        </Click>
                    </AjaxEvents>
                </ext:Button>
            </Buttons>
            <Defaults>
                <ext:Parameter Name="anchor" Value="95%" Mode="Value" Encode="False" />
                <ext:Parameter Name="allowBlank" Value="false" Mode="Raw" Encode="False" />
            </Defaults>
        </ext:FormPanel>
        <ext:Panel ID="Panel1" runat="server" Cls="images-view" Frame="True">
            <Body>
                <ext:FitLayout ID="FitLayout1" runat="server">
    
     <ext:DataView 
                            ID="ImageView"
                            runat="server" 
                            SingleSelect="true" 
                            OverClass="x-view-over" 
                            ItemSelector="div.thumb-wrap" 
                            EmptyText="<div style='padding:10px;'>No images match the specified filter</div>" StoreID="sImages"
                            meta:resourcekey="ImageResource1">
                            <Template ID="Template1" runat="server">
                                <Html>
									<tpl for=".">
										<div class="thumb-wrap" id="{ImageID}">
										<div class="thumb"><img src="/image.route?imageId={ImageID}" title="{Label}" /></div>
										<span>{Label}</span></div>
									</tpl>
								</Html>
                            </Template>
                            <Listeners>                                    
                                <BeforeSelect Handler="return this.store.getRange().length > 0;" />                                    
                                <SelectionChange Handler="ShowPreview()" Buffer="100" />
                            </Listeners>                                
                        </ext:DataView>  
    </ext:FitLayout>
    </Body>
    </ext:Panel>
    
    <ext:Panel ID="Panel2" runat="server" Cls="images-view" Frame="True"  >
            <Body>
                <ext:FitLayout ID="FitLayout2" runat="server" >
    <ext:Image ID="Image1" runat="server"  AutoHeight="false" AutoWidth="false" ImageUrl="none"/>
                    </ext:FitLayout>
                    </Body>
                    </ext:Panel>
    </Body>
    </ext:FormPanel>
</asp:Content>
